<div class="devui-demo-container" dAnchorBox dAnchorHashSupport [view]="{ top: 180, bottom: 0 }">
  <d-demo-nav [navItems]="navItems"></d-demo-nav>
  <div class="devui-demo-example" [dAnchor]="'basic-usage'">
    <div class="devui-demo-title">{{ 'components.tree-select.basicDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="tree-select-basic" [sourceData]="TreeSelectBasicComponent">
      <d-tree-select-basic demo></d-tree-select-basic>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'labelization'">
    <div class="devui-demo-title">{{ 'components.tree-select.labelizationDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="tree-select-labelization" [sourceData]="TreeSelectLabelizationComponent">
      <d-tree-select-labelization demo></d-tree-select-labelization>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'leaf-only'">
    <div class="devui-demo-title">{{ 'components.tree-select.leafOnlyDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="tree-select-leaf-only" [sourceData]="TreeSelectLeafOnlyComponent">
      <d-tree-select-leaf-only demo></d-tree-select-leaf-only>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'init-hooks'">
    <div class="devui-demo-title">{{ 'components.tree-select.hooksDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="tree-select-hooks" [sourceData]="TreeSelectHooksComponent">
      <d-tree-select-hooks demo></d-tree-select-hooks>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'simple-search'">
    <div class="devui-demo-title">{{ 'components.tree-select.searchableDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="tree-select-searchable" [sourceData]="TreeSelectSearchableComponent">
      <d-tree-select-searchable demo></d-tree-select-searchable>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'append-to-element'">
    <div class="devui-demo-title">{{ 'components.tree-select.appendToDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="tree-select-append-to" [sourceData]="TreeSelectAppendToComponent">
      <d-tree-select-append-to demo></d-tree-select-append-to>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'custom-icon'">
    <div class="devui-demo-title">{{ 'components.tree-select.customIconDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="tree-select-custom-icon" [sourceData]="TreeSelectCustomIconComponent">
      <d-tree-select-custom-icon demo></d-tree-select-custom-icon>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'keys'">
    <div class="devui-demo-title">{{ 'components.tree-select.keysDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="tree-select-keys" [sourceData]="TreeSelectKeysComponent">
      <d-tree-select-keys demo></d-tree-select-keys>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'custom-template'">
    <div class="devui-demo-title">{{ 'components.tree-select.customTemplateDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.tree-select.customTemplateDemo.description' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="tree-select-keys" [sourceData]="TreeSelectCustomTemplateComponent">
      <d-tree-select-custom-template demo></d-tree-select-custom-template>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'icon-parent'">
    <div class="devui-demo-title">{{ 'components.tree-select.iconParentDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="tree-select-icon-parent" [sourceData]="TreeSelectIconParentComponent">
      <d-tree-select-icon-parent demo></d-tree-select-icon-parent>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'virtual-scroll'">
    <div class="devui-demo-title">{{ 'components.tree-select.virtualScrollDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="components-tree-select-virtual-scroll" [sourceData]="treeSelectDemoVirtualScroll">
      <d-demo-tree-select-virtual-scroll demo></d-demo-tree-select-virtual-scroll>
    </d-codebox>
  </div>
</div>
